<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="static/css/style.css">
  <link rel="stylesheet" type="text/css" href="static/css/public.css">
  <link rel="stylesheet" type="text/css" href="static/css/index.css">
  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_403219_j9odqt5lp18257b9.css">
  <title>图片</title>
  <style>
  </style>
</head>
<body>
  <div class="article">
    <div class="header" id='header'>
      <div class="wrap">
        <a href="#" class="logo fl"><img src="static/img/logo.png" alt=""></a>
        <ul class='fl nav' id='nav'>
          <li class='active'><a href="#">首页</a></li>
          <li><a href="#">推荐作品</a></li>
          <li><a href="#">动态</a></li>
          <span></span>
        </ul>
        <div class="fr right">
          <a href="javascript:;" class="submission fr">投稿</a>
          <div class="avator fr"><img src="static/img/img_all01.png" alt=""></div>
          <div class="news fr"><img src="static/img/news.png" alt=""><i></i></div>
          <div class="search-box fr">
            <a class="search fl clearfix" id="search"></a>
            <input type="text" class='fl' placeholder="搜索作品、二次元星人等">
          </div>
        </div>
      </div>
    </div>

    <div class="top">
      <div class="wrap clearfix">
        <div class="info fl">
          <h3>个性插画创作<img src="static/img/icon_hot.png" alt=""></h3>
          <p>19小时前发布</p>
          <p>文章&nbsp;&nbsp;&nbsp;禁止商业使用<span class="fr">
            <img src="static/img/icon_look through.png" alt=""><span>8986</span>
            <img src="static/img/icon_thumb up.png" alt=""><span>86</span>
            <img src="static/img/icon_comment.png" alt=""><span>56</span>
          </span></p>
        </div>
        <div class="who">
          <div class="fl">
            <img src="static/img/img_all02.png" alt="">
          </div>
          <div class="name">
            <h4>木言</h4>
            <p>插画师</p>
            <div><a href="javascript:;" class='active'>关注</a><a href="javascript:;">私信</a></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文章主体 -->
    <div class="main">
      <div class="wrap">
        <div class="text">
          <p>俄国插画家Zutto 告诉我们怎样平衡画面元素，并且用矢量表现出来。</p>
          <p>在这个教程里，我将解释怎样创建一个有各种元素组成的画面，并且赋予各种性格</p>
          <img src="static/img/demo.jpg" alt="">
        </div>
        <div class="bottom">
          <div class="shang"><img src="static/img/icon_tip.png" alt=""></div>
          <div class="btn">
            <div>
              <i class='icon iconfont icon-fenxiang fl'></i>
              <span>帮宣</span></br><span>34</span>
            </div>
            <div>
              <i class='icon iconfont icon-star fl'></i>
              <span>收藏</span></br><span>34</span>
            </div>
            <div>
              <i class='icon iconfont icon-xihuan fl'></i>
              <span>点赞</span></br><span>34</span>
            </div>
          </div>
          <div class="fenxiang">
            分享到：<img src="static/img/sina.png" alt="">
            <img src="static/img/wechat.png" alt="">
            <img src="static/img/qzone.png" alt="">
            <img src="static/img/qq.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 下面的评论鬼东西 -->
    <div class="commend">
      <div class="wrap clearfix">
        <div class="left fl">
          <!-- 推荐 -->
          <div class="tuijian">
            <h3>相关推荐</h3>
            <ul>
              <li>
                <a href="#">
                  <img src="static/img/tuijian.jpg" height="200" width="267" alt="">
                  <div class="mask">
                    <p>《卡酷》插画教程</p>
                    <p><img src="static/img/img_all02.png" alt=""><span>旺旺</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="static/img/tuijian.jpg" height="200" width="267" alt="">
                  <div class="mask">
                    <p>《卡酷》插画教程</p>
                    <p><img src="static/img/img_all02.png" alt=""><span>旺旺</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="static/img/tuijian.jpg" height="200" width="267" alt="">
                  <div class="mask">
                    <p>《卡酷》插画教程</p>
                    <p><img src="static/img/img_all02.png" alt=""><span>旺旺</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="static/img/tuijian.jpg" height="200" width="267" alt="">
                  <div class="mask">
                    <p>《卡酷》插画教程</p>
                    <p><img src="static/img/img_all02.png" alt=""><span>旺旺</span></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="static/img/tuijian.jpg" height="200" width="267" alt="">
                  <div class="mask">
                    <p>《卡酷》插画教程</p>
                    <p><img src="static/img/img_all02.png" alt=""><span>旺旺</span></p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- 评论 -->
          <div class="com">
            <h3>评论</h3>
            <div class="com-box">
              <input type="text" placeholder='傻叼先登录'>
              <div class="submit clearfix"><a href="javascript:;">发言</a></div>
              <span id='num'>200</span>
            </div>
            <!-- 评论列表 -->
            <div class="lists" id='list'>
              <p>全部评论<span>371</span></p>
              <ul class='inner'>
                <li class='clearfix'>
                  <div class="fl avator">
                    <img src="static/img/img_all01.png" alt="">
                  </div>
                  <div class="content">
                    <div class="top">
                      <span>彭于晏</span><span>11天前</span>
                    </div>
                    <div class="mid">
                      <p>呵呵～你记错了，明明是李炬好不好</p>
                      <div class="has-child">
                        <div class="name">吴彦祖</div>
                        <div class="con">
                          <p>听说有个叫姜明的人比我帅？听说有个叫姜明的人比我帅？听说有个叫姜明的人比我帅？</p>
                        </div>
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="btn"><i class='icon iconfont icon-pinglun'></i><i class='icon iconfont icon-zan'></i><span>23</span></div>
                      <div class="hidden">
                        <div class="box clearfix">
                          <div class="fl saytowho">
                            回复 <span>彭于晏</span>:
                          </div>
                          <input type="text" class='huifu'>
                        </div>
                        <div class="submit clearfix"><a href="javascript:;">发言</a></div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class='clearfix'>
                  <div class="fl avator">
                    <img src="static/img/img_all02.png" alt="">
                  </div>
                  <div class="content">
                    <div class="top">
                      <span>吴彦祖</span><span>11天前</span>
                    </div>
                    <div class="mid">
                      <p>听说有个叫姜明的人比我帅？听说有个叫姜明的人比我帅？听说有个叫姜明的人比我帅？</p>
                    </div>
                    <div class="bottom">
                      <div class="btn"><i class='icon iconfont icon-pinglun'></i><i class='icon iconfont icon-zan'></i><span>23</span></div>
                      <div class="hidden">
                        <div class="box clearfix">
                          <div class="fl saytowho">
                            回复 <span>珍珠问</span>:
                          </div>
                          <input type="text" class='huifu'>
                        </div>
                        <div class="submit clearfix"><a href="javascript:;">发言</a></div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 更多 -->
            <a href="javascript:;" id='more-pinglun' class='more-pinglun'>加载更多</a>
          </div>
        </div>
        <div class="right fr">
          <div class="about">
            <img src="static/img/img_all02.png" alt="">
            <p class='name'>慕言</p>
            <p>关注<span>169</span>&nbsp;丨&nbsp;粉丝 <span>54</span></p>
            <p>爱插画的飞行官小北</p>
            <p class='btn'><a href="javascript:;" class='active'>关注</a><a href="javascript:;">私信</a></p>
          </div>
          <div class="type">
            <h3>标签</h3>
            <ul class='clearfix'>
                <li>哈哈</li>
                <li>吼吼</li>
                <li>他吗的</li>
                <li>呵呵呵呵</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <!-- footer -->
    <div class="footer">
      <div class="wrap">
        <div class="content clearfix">
          <div class="left fl">
            <dl>
              <dt><a href="javascript:;">摸了个鱼</a></dt>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
            </dl>
          </div>
          <div class="mid fl">
            <dl>
              <dt><a href="javascript:;">友情链接</a></dt>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
              <dd><a href="javascript:;">关于我们</a></dd>
            </dl>
          </div>
          <div class="right">
            <div class="box">
              <img src="static/img/footer1.png" height="120" width="120" alt="">
              <p>手机端下载</p>
              <div class="hidden">
                <img src="static/img/ma1.jpg" alt="">
              </div>
            </div>
            <div class="box">
              <img src="static/img/footer2.png" height="120" width="122" alt="">
              <p>官方微信</p>
              <div class="hidden">
                <img src="static/img/ma1.jpg" alt="">
              </div>
            </div>
            <div class="box">
              <img src="static/img/footer3.png" height="120" width="120" alt="">
              <p>官方微博</p>
              <div class="hidden">
                <img src="static/img/ma1.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="pt40">
          <p>摸了个鱼用户所发布展示的原创作品版权归原作者所有，任何商业用途均须联系作者。</br>如未经授权用作他处，作者将保留追究侵权者法律责任的权利</p>
        </div>
        <div class='bot'>
          <span>京ICP备11017824号-4&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;京ICP证130164号&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;北京市公安局朝阳分局备案编号:11010502000501</span>
        </div>
        </div>
      </div>
    </div>

  </div>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src='static/js/liju.js'></script>
</body>
<script>
  $(function () {
    $('#list').on('click', '.icon-pinglun', function () {
      $(this).parent().next('.hidden').slideToggle()
    })
  })
</script>
</html>